<template>
    <div class="systemInfo">
        <div class="systemHeader">
            <Row>
                <Col :xs="24" :sm="6" :md="5" :lg="4">
                    <div class="systemTop">
                        <Button type="primary" class="systemStatus" @click="showAddForms = true"><i class="ivu-icon ivu-icon-plus systemIonic"></i>新增</Button>
                        <Button type="warning" @click="showEdit('')"><i class="ivu-icon ivu-icon-edit systemIonic"></i>编辑</Button>
                    </div>
                </Col>
                <Col :xs="12" :sm="7" :md="7" :lg="3">
                    <div class="systemList">
                        <Select v-model="query.name" placeholder="请选择系统名称" @on-change="selectChange" >
                            <Option v-for="(item,index) in systemName" :value="item.value" :key="item.value">{{ item.sysName }}</Option>
                        </Select>
                    </div>
               </Col>
                <Col :xs="12" :sm="9" :md="7" :lg="10">
                    <div class="systemSearch">
                        <Button type="success" icon="ios-search" @click="getInfoList">搜索</Button>
                    </div>
                </Col>
            </Row>
        </div>
        <div class="systemContent">
           <div class="systemMain">
               <Row>
                   <Col span="24">
                    <Table border ref="selection" :page-size="5" :columns="columns4" :height="tabHeight"  :data="resData"></Table>
                   </Col>
               </Row>

           </div>
        </div>
        <!--分页-->
        <div class="sysPage">
            <Page  v-if="listPage"  @on-change="changePage" @on-page-size-change="pageSize" :total="listPage.recordCount" show-sizer></Page>
        </div>

        <!--//弹框-->
        <addSystem  :showAddForm="showAddForms" @reset="cancelModal"></addSystem>
        <editSystem :showEditForm="showEditForms" :data="rowDataInfo[0]" @reset="cancelModal"></editSystem>

    </div>
</template>

<script>
    import util from '../../libs/util'
    import addSystem from '../../modal/system/addSystem.vue'
    import editSystem from '../../modal/system/editSystem.vue'
    export default {
        name: '',
        data () {
            return {
                showAddForms:false,
                showEditForms:false,
                resData:[],//列表数据  slice(起始索引，起始索引+pagesize)
                listPage: null,
                tabHeight: window.innerHeight - 315, // 计算tab的高度
                rowDataInfo:[], //存储复选框选中的数据
                // 查询条件
                query: {
                    name: '',
                    numPerPage: 10,
                    pageNum: 1
                },
                systemName: [
                    {
                        value: 'xuanz',
                        sysName: '请选择系统名称'
                    },
                    {
                        value: 'zg',
                        sysName: '租管'
                    },
                    {
                        value: 'jr',
                        sysName: '金融'
                    },
                    {
                        value: 'zhzx',
                        sysName: '账户中心'
                    },
                    {
                        value: 'jszx',
                        sysName: '结算中心'
                    }
                ],
                model1: '',
                columns4: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '编号',
                        key: 'number'
                    },
                    {
                        title: '系统名称',
                        key: 'name'
                    },
                    {
                        title: '描述',
                        key: 'descs'
                    }
                ]
            }
        },
        components: {
            addSystem,
            editSystem
        },
        created() {
            this.getInfoList()
//            console.log(this.systemName)

        },
        methods: {
            getInfoList(){
                var _this = this
                let url = '/backcenter-service/api/innersys/list.json'
                let data={
                    "numPerPage":_this.query.numPerPage,
                    "pageNum":_this.query.pageNum,
                    "name":_this.query.name
                }
//          ,{params:data}
                util.ajax.get(url,{params: data}).then((result) => {
                    console.log(result)
                    if (result.data.code == 0) {
                        let res = result.data.res.data
                        let page = result.data.res.page
                        let serachInfo = result.data.res.search.name
                        console.log(page)
                        this.resData = res
                        this.listPage = page
                        this.query.name = serachInfo
//            console.log(res)
//            console.log(_this.resData)
                    } else {
                        this.$Message.error(res.res.msg)
                    }
                }).catch((error) => {
                    console.log(error)
                })

            },
            onSelect(selection,row) {
//                console.log(selection)
//                console.log(row)

            },
            selectInfo(selection) {
                this.rowDataInfo = selection
            },
            handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            },
            cancelModal(boolean) {
                if(boolean){
                    this.getInfoList()
                }
                this.showAddForms = false
                this.showEditForms = false
            },
            showEdit() {
                if (this.rowDataInfo.length == 0) {
                    this.$Message.error('请选择编辑项!');
                } else if (this.rowDataInfo.length >= 2) {
                    this.$Message.error('一次只能编辑一项!');
                } else{
                    this.showEditForms = true
                }
            },
            // 分页导航事件 回调index
            changePage (index) {
                console.log(index)
//                this.$refs.table.selectAll(false); // 取消所有选中项并且清空其绑定的数据
                this.query.pageNum = index;
                this.getInfoList();
            },
            //切换每页条数时的回调，返回切换后的每页条数
            pageSize (size) {
                this.query.numPerPage = size;
                this.getInfoList();
            },
            selectChange(value) {
                console.log(value)
            }
        }
    }
</script>


<style scoped>
    .systemHeader{
        margin-bottom: 15px;
        margin-top: 5px;
    }
.systemStatus{
    margin-right: 20px;
}
    .systemIonic{
        padding-right:5px;
    }
    .systemSearch{
        margin-left: 10px;
    }
    .sysPage{
        padding: 20px 0;
        text-align: right;
    }
</style>
